<style scoped>
#action-sheet-wrapper {
	width: 7.5rem;
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 10;
	background-color: rgba(0, 0, 0, .25);
}
.modal-enter-active, .modal-leave-active {
	transition: opacity .2s;
}
.modal-enter-active #action-sheet-content, .modal-leave-active #action-sheet-content {
	transition: transform .2s;
}
.modal-enter, .modal-leave-to {
	opacity: 0;
}
.modal-enter #action-sheet-content, .modal-leave-to #action-sheet-content {
	transform: translateY(100%);
}
#action-sheet-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	user-select: none;
	text-align: center;
}
.item {
	color: rgba(0, 0, 0, .8);
	font-size: .3rem;
	text-align: center;
	line-height: 1rem;
	background-color: #FFF;
}
.item + .item {
	border-top: 1px solid rgba(0, 0, 0, .06);
}
.item:first-child {
	border-radius: .16rem .16rem 0 0;
}
/* .item:last-child {
	padding-bottom: .8rem;
} */
</style>

<template>
	<transition name="modal">
		<div id="action-sheet-wrapper" @click="close" @touchmove.prevent v-if="isVisible">
			<div id="action-sheet-content" @click="handleClick">
				<div class="item" :style="{color: item.color}" :data-index="index" v-for="(item, index) of itemList">{{item.text}}</div>
			</div>
		</div>
	</transition>
</template>

<script>
	export default {
		data() {
			return {
				isVisible: false,
				itemList: []

			}
		},

		mounted() {
			this.isVisible = true
		},

		methods: {
			close() {
				this.isVisible = false
			},
			handleClick(e) {
				const {index} = e.target.dataset

				if (typeof index === 'unedfined') {
					return
				}

				this.callback(+ index)
			}
		}
	}
</script>